<template>
	<view>
		<view class="add">
			<view class="addList">
				<view class="Phone"><text>姓&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp名</text></view>
				<view class="input">{{familyAdd.familyName}}</view>
			</view>
			<hr />
			<view class="addList">
				<view class="Phone"><text>出生日期</text></view>
				<!-- <uni-datetime-picker type="date" :clearIcon="false" v-model="familyAdd.birthday" :border="false"
					@maskClick="maskClick" /> -->
				<view  class="input" >{{familyAdd.birthday}}</view>
				<!-- <view class="input"><input v-model="familyAdd.birthday" type="text" value="" /></view> -->
			</view>
			<hr />
			<view class="addList">
				<view class="Phone"><text>性&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp别</text></view>
				<view  class="input" v-if="familyAdd.gender==0">男</view>
				<view  class="input" v-if="familyAdd.gender==1">女</view>
			<!-- 	<view class="uni-form-item uni-column">
					<radio-group class="xuang" @change="radioChange">
						<label v-for="(item,index) in radioItems" :key="index">
							<radio :id="item.name" :value="item.name" :checked="index === current "></radio>
							<label class="label-2-text" :for="item.name">
								<text>{{item.value}}</text>
							</label>
						</label>
					</radio-group>
				</view> -->
			</view>
			<!-- <view class="input"><input v-model="familyAdd.gender" type="text" value="" /></view> -->

			<hr />
			<view class="addList">
				<view class="Phone"><text>手&nbsp&nbsp机&nbsp&nbsp号</text></view>
				<view class="input">{{familyAdd.phone}}</view>
			</view>
			<hr />
			<view class="addList">
				<view class="Phone"><text>关&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp系</text></view>
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
						<!-- 	<picker @change="bindPickerChange" :value="index" :range="array">
								<view class="uni-input">{{array[currents]}}</view>
							</picker> -->
							<view  class="input">{{familyAdd.relationshipText}}</view>
						</view>
					</view>
				</view>
				<!-- <view class="input"><input v-model="familyAdd.relationship" type="text" value="" /></view> -->
			</view>
			<hr />

			<!-- 备注 -->
			<view class="addLists">
				<!-- <view class="Phone"><text>备&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp注:</text></view> -->
				<view class="texta"   >备&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp注 <view  class="inputs" >{{familyAdd.remark}}</view></view>
			</view>

			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				currents: 0,
				familyAdd: {
					birthday: '',
					familyName: '',
					gender: '',
					phone: '',
					id:'',
					relationship: '',
					memberId: '',
					remark:''
				},
				array: ['请选择', '本人', '父母', '兄弟', '朋友', '子女', '其他', '配偶'],
				index: 0,
				radioItems: [{
						name: '0',
						value: '男',

					},
					{
						name: '1',
						value: '女',

					}
				],
			}
		},
		onShow() {
			this.family();
		},
		onLoad: function(option) {
			const item = JSON.parse(decodeURIComponent(option.item));
			this.familyAdd = item
			// console.log(this.familyAdd)
			if (this.familyAdd.gender == 1) {
				this.current = 1
			} else {
				this.current = 0
			}
			if (this.familyAdd.relationship == 1) {
				this.currents = 1
			} else if (this.familyAdd.relationship == 2) {
				this.currents = 2
			} else if (this.familyAdd.relationship == 3) {
				this.currents = 3
			} else if (this.familyAdd.relationship == 4) {
				this.currents = 4
			} else if (this.familyAdd.relationship == 5) {
				this.currents = 5
			} else if (this.familyAdd.relationship == 6) {
				this.currents = 6
			} else if (this.familyAdd.relationship == 7) {
				this.currents = 7
			}
		},
		methods: {
			async tijiao() {
				try {
					uni.showLoading({
						title: '提交保存'
					});
					const ret = await this
						.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
							url: '/api-operate/families/save',
							method: "POST",
							data: this.familyAdd
						});
					// console.log(ret)
					if (ret.success == true) {
						uni.showToast({
							title: '修改成功',
							duration: 2000
						});
						uni.redirectTo({
						    url: '/pages/familyManagement/index'
						});
					} else {
						uni.showToast({
							title: ret.msg,
							duration: 2000
						});
					}

				} catch (e) {
					uni.hideLoading(); //加载结束
					uni.showToast({
						title: '家属列表,请稍后再试',
						duration: 2000
					});
				}
			},
			family() {
				const id = uni.getStorageSync('id');
				// console.log(id)
				this.familyAdd.memberId = id
				// console.log(this.radioItems)
			},
			bindPickerChange: function(e) {
				// console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
				this.familyAdd.relationship = this.index
				if (this.familyAdd.relationship == 1) {
					this.currents = 1
				}
				else if (this.familyAdd.relationship == 2) {
					this.currents = 2
				}
				else if (this.familyAdd.relationship == 3) {
					this.currents = 3
				}
				else if (this.familyAdd.relationship == 4) {
					this.currents = 4
				}
				else if (this.familyAdd.relationship == 5) {
					this.currents = 5
				}
				else if (this.familyAdd.relationship == 6) {
					this.currents = 6
				}
				else if (this.familyAdd.relationship == 7) {
					this.currents = 7
				}
				// console.log(this.familyAdd)
			},
			radioChange: function(e) {
				var checked = e.target.value
				// var changed = {}
				// for (var i = 0; i < this.radioItems.length; i++) {
				// 	if (checked.indexOf(this.radioItems[i].name) !== -1) {
				// 		changed['radioItems[' + i + '].checked'] = true
				// 	} else {
				// 		changed['radioItems[' + i + '].checked'] = false
				// 	}
				// }
				this.familyAdd.gender = checked
				if (this.familyAdd.gender == 1) {
					this.current = 1
				} else {
					this.current = 0
				}
			},

		}

	}
</script>

<style lang="scss">
	@import '@/common/uni-nvue.scss';

	.add {
		margin-top: 20rpx;

		hr {
			border: none;
			height: 3px;
			background-color: #f3f3f3;
		}
	}

	.addList {
		// margin-top: 20rpx;
		height: 100rpx;
		background-color: #FFFFFF;

		display: flex;
		color: #565656;
		font-size: 13px;
		font-weight: 600;
		flex-direction: row;
		align-items: center;
	}

	.addLists {
		// margin-top: 20rpx;
		height: 400rpx;
		background-color: #FFFFFF;
		width: 100%;
		display: flex;
		color: #565656;
		font-size: 13px;
		font-weight: 600;
		flex-direction: row;

		// align-items: center;
		.texta {
			// margin-left: 60rpx;
			background-color: #FFFFFF;
			width: 200rpx;
			margin-left: 40rpx;
			font-size: 35rpx;
		}
	}


	.Phone {
		// background-color: #007AFF;
		width: 200rpx;
		margin-left: 40rpx;
		font-size: 35rpx;
	}

	.input {
		font-size: 30rpx;
		color: #949494;
	}
	.inputs{
		font-size: 30rpx;
		color: #949494;
		// background-color: #007AFF;
		width: 320px;
		margin-top: 40rpx;
	}

	.xuang {
		display: flex;

		label {
			margin-right: 40rpx;
		}
	}

	.button {
		margin-top: 400rpx;
		background-color: #da422a;
		width: 85%;
	}

	.uni-list {
		// background-color: #007AFF;
		width: 70%;
	}

	.uni-input {
		font-size: 30rpx;
		color: #959595;
	}
</style>
